<template>
  <div class="findmodel">
    <p>查询模式选择</p>
    <div class="findmodel-item">
      <div
        v-for="item in stationMangeItems"
        :key="item.id"
        class="findmodel-item-title"
        @click="chooseQueryItem(item)"
      >
        <i :class="['iconfont', item.icon, 'findmodel-item-select']"></i>
        <div class="findmodel-item-select">{{ item.title }}</div>
      </div>
    </div>
  </div>
  <!-- 中间包含站点选择 -->
  <div class="center-wrapper" v-if="!isInRouteDesign">
    <!-- 地铁线路 -->
    <div id="subLine-controller">
      <div class="title-bg">
        <i class="iconfont metro-lineRoute"></i> 地铁线路
      </div>
      <div class="item-wrapper">
        <div
          class="item"
          v-for="item in subLineData"
          @click.stop="handleItemClick(item)"
        >
          <div
            class="box"
            :style="{
              borderColor: item.color,
              backgroundColor: item.choosed ? item.color : 'rgba(0,0,0,0)',
            }"
          ></div>
          <span :style="{ color: '#34c5cf' }">{{ item.name.slice(-3) }}</span>
        </div>
      </div>
    </div>
    <!-- 站点列表 -->
    <div id="station-controller">
      <div class="title-bg"><i class="iconfont metro-ditie"></i> 地铁站点</div>
      <div class="item-wrapper">
        <div
          class="item"
          v-for="item in stationData"
          @click="chooseStation(item)"
        >
          <div
            class="box"
            :style="{
              backgroundColor: item.choosed ? '#fff' : 'rgba(0,0,0,0)',
            }"
          ></div>
          <span :style="{ color: '#34c5cf' }">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="station">
    <p>站控措施</p>
    <div class="findmodel-item">
      <div
        v-for="item in station_solutions"
        :key="item.id"
        class="findmodel-item-title"
      >
        <i :class="['iconfont', item.iconName, 'findmodel-item-select']"></i>
        <div class="findmodel-item-select">{{ item.title }}</div>
      </div>
    </div>
  </div>
  <!-- 路径规划面板 -->
  <RouteDesign v-if="isInRouteDesign" class="route-design" />
</template>

<script setup>
import RouteDesign from '@/components/RouteDesgin.vue';
import { ref, onMounted, onBeforeUnmount } from 'vue';
 
import {
    stationMangeItems,
    station_solutions,
} from "@/store/staticData";
import {
  renderHeat,
  flyToDefaultView,
  focusOnStation,
} from '@/cesiumTools/material/effectController.js';
import { useLineData, useMeasureData } from '@/store/index';
const lineDataStore = useLineData();
const viewer = lineDataStore.viewer

const lineData = useLineData();
const subLineData = ref(lineData.allData); //线路数据
const measureDataStore = useMeasureData();
const queryItems = ref(stationMangeItems);
const solutions = ref(station_solutions);
const stationData = ref([]);
const queryWay = ref("");
const isInRouteDesign = ref(false);
const removeHeat = ref(null); // 定义 removeHeat 变量
const showHeatMap = ref(false); // 管理热力图的显示状态

onMounted(()=>{
  flyToDefaultView(viewer);
})


const chooseQueryItem = (item) => {
  if (item.title === '站点拥挤度') {
    showHeatMap.value = !showHeatMap.value; // 切换热力图的显示状态
    if (showHeatMap.value) {
      renderClowed();
    } else {
      removeHeat.value && removeHeat.value(); // 移除热力图
      flyToDefaultView(lineData.viewer);
    }
  } else {
    removeHeat.value && removeHeat.value(); // 移除热力图
    showHeatMap.value = false; // 重置热力图的显示状态
  }

  // 处理地图效果
  handleEffect(item.title);

  // 处理UI
  queryItems.value = queryItems.value.map((n) => {
    if (n.id === item.id) {
      n.active = true;
    } else {
      n.active = false;
    }
    return n;
  });
};
// 从数组中随机取几个数
const getRandomArrayValue = (arr, num) => {
  var sData = arr.slice(0),
    i = arr.length,
    min = i - num,
    item,
    index;
  while (i-- > min) {
    index = Math.floor((i + 1) * Math.random());
    item = sData[index];
    sData[index] = sData[i];
    sData[i] = item;
  }
  return sData.slice(min);
};
const renderStationMeasure = () => {
  const resultData = [];
  lineData.allData.forEach((item) => {
    const { stationsList, color } = item;
    const result = stationsList.map((s) => {
      // 0-5个站控措施
      const measureNum = getRandomIntInclusive(0, 5);
      let measures = getRandomArrayValue(station_solutions, measureNum);
      s.measures = measures;
      s.color = color;
      return {
        name: s.name,
        measures,
      };
    });
    resultData.push(result);
  });
  // 全局共享站控措施数据
  measureDataStore.setData(resultData);
};
const handleEffect = (title) => {
  if (title === '路径规划') {
    isInRouteDesign.value = !isInRouteDesign.value;
  } else if (title === '站控措施') {
    renderStationMeasure();
  } else if (title === '周边查询') {
    alert('还没做');
  }
};

// 站点拥挤度逻辑,点击展示热力图，表现各个站点的拥挤程度
const renderClowed = () => {
  // 解析线路拥挤度数据
  const dataSource = [];
  // 清除当前底图，然后添加arcgis底图
  subLineData.value.forEach((item) => {
    //现在还剩获取线路数据的逻辑
    const { stationsList } = item;
    stationsList.forEach((s) => {
      const { position } = s;
      dataSource.push({
        x: position.lng,
        y: position.lat,
        value: Math.ceil(Math.random() * 1000),
      });
    });
  });
  removeHeat.value = renderHeat(lineData.viewer, dataSource); // 赋值给 removeHeat 变量
};

const getRandomIntInclusive = (min, max) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值
};

// 点击地铁线路
const handleItemClick = async (item) => {
  // console.log('handleItemClick called with:', item) // 添加调试信息
  // 判断点击的是同一个路线
  if (item.choosed) {
    return;
  }
  // 重置所有线路的选中状态
  subLineData.value.forEach((sub) => {
    sub.choosed = false;
  });
  stationData.value &&
    stationData.value.forEach((station) => {
      station.choosed = false;
    });
  // 选中当前线路
  item.choosed = true;
  // 更新站点数据
  stationData.value = item.stationsList;
};
const chooseStation = (item) => {
  if (item.choosed) {
    return;
  }
  stationData.value.forEach((station) => {
    station.choosed = false;
  });
  item.choosed = true;
  focusOnStation(lineData.viewer, item.name);
};
</script>

<style scoped>
.findmodel {
  position: absolute;
  left: 3%;
  top: 8%;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.findmodel-item {
  font-size: 13px;
}

.findmodel-item-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.findmodel-item-select {
  height: 25px;
  border: 5px solid #25434f;
  text-align: center;
  background: linear-gradient(to bottom, #25434f, #1a3641);
}

.route-design {
  position: absolute;
  left: 3%;
  top: 15%;
}

.station {
  position: absolute;
  right: 3%;
  top: 8%;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.center-wrapper {
  position: absolute;
  left: 37%;
  bottom: 10%;
}
#subLine-controller {
  position: absolute;
  bottom: 8%;
  left: 32.5%;
  transform: translateX(-60%);
  width: 180px;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #ab7818;
  display: flex;
  flex-direction: column;
}

.box {
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  user-select: all;
  cursor: pointer;
  transition: all 0.3s linear;
}

.item {
  width: 64.992px;
  height: 20.006px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.156vw;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #885f12;
  color: #fff;
  font-size: 0.521vw;
  pointer-events: all;
}

.item:hover {
  border: 1px solid #d8961a;
}

.item > span {
  line-height: 0.469vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 2.083vw;
}

.item > input {
  outline: none;
  border: none;
  transition: all 0.3s ease;
}

.item-wrapper {
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap;
  flex: 1;
  padding: 4px;
  overflow: hidden;
}

/* 站点列表 */
#station-controller {
  width: 500px;
  height: 200px;
  border: 1px solid #ab7818;
  background-color: rgba(0, 0, 0, 0.3);
  transform: translateX(17%);
  position: absolute;
  left: 38%;
  bottom: 8%;
  color: #fff;
  display: flex;
  flex-direction: column;
}

#station-controller .item-wrapper {
  justify-content: flex-start;
}

#station-controller .item {
  margin: 0 7px;
}

.title-bg {
  width: 100%;
  height: 30px;
  background: url('/src/assets/uiResources/title-bg.png');
  background-size: contain;
  color: #fff;
  background-repeat: no-repeat;
  line-height: 30px;
  margin-left: 10px;
  background: rgb(255, 255, 255);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 9%,
    rgba(211, 156, 50, 1) 57%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
